<template>
  <div>
    <van-swipe-cell>
      <div class="yycard">
        <div>
          <img :src="form.strCover" class="yyimg">
        </div>
        <div class="yycard_p">
          <p class="yycard_title">{{form.strAppname}}</p>
          <p>应用类型：{{form.iApptypename}}</p>
          <p>创建者：{{form.strOperatorname}}</p>
        </div>
      </div>
      <template #right>
        <van-button @click="wxdeleteInfo(item)" square text="删除" type="danger" class="delete-button"/>
        <van-button @click="wxShowDetail(item)" square text="详情" type="danger" class="delete-button2"/>
      </template>
    </van-swipe-cell>
    <van-form>
      <van-field
        v-model="form.strPackagename"
        readonly
        name="链接地址"
        label="应用链接/包名"
      />
      <van-field
        v-model="form.strCreatetime"
        readonly
        name="创建时间"
        label="创建时间"
      />
      <van-field
        v-model="form.strDetail"
        readonly
        name="strDetail"
        rows="2"
        autosize
        label="应用描述"
        type="textarea"
        maxlength="128"
        show-word-limit
      />
      <van-field
        class="yycard_btn"
        label="应用数据"
        @click="getyyData()"
      />
      <van-field
        v-if="form.iApptype===1"
        class="yycard_btn"
        label="素材数据"
        @click="getMaterialData()"
      />
    </van-form>
    <van-button type="primary" block @click="editButton()">修改应用</van-button>
  </div>
</template>
<script>
  import {ShowDetail} from '@/api/application'
  import axios from 'axios'

  export default {
    name: 'detailApplication',
    data() {
      return {
        form: {
          iApptype: '',
          strAppname: '',
          strCover: '',
          strPackagename: '',
          strOperatorname: '',
          strDetail: '',
          iStatus: '',
          id: '',
          iAppnum: '',
          deviceType: 1,
          strOrgnum: '',
          valArr: []
        },
      }
    },
    created() {
      this.iApp = JSON.parse(this.$route.query.rowAll)
      console.log(this.iApp)
      this.wxShowDetail()
    },
    methods: {
      //详情应用数据
      wxShowDetail() {
        ShowDetail({iAppnum: this.iApp.iAppnum}).then(res => {
          this.form = res.appInfo
        })
      },
      //跳转应用数据页面
      getyyData() {
        this.$router.push({path: 'ApplicationData', query: {rowAll: this.iApp.iAppnum}})
      },
      //跳转素材数据页面
      getMaterialData() {
        this.$router.push({path: 'MaterialData', query: {rowAll: this.iApp.iAppnum}})
      },
      //跳转修改页面
      editButton() {
        this.$router.push({path: 'addApplication', query: {rowAll: JSON.stringify(this.iApp), buttonadd: 2}})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .yyp {
    text-align: center;
    font-size: 14px;
    color: #8c8a8a;
    line-height: 2;
  }

  .yycard {
    display: flex;
    border-bottom: 1px solid whitesmoke;
    padding: 5px 0;
    margin-left: 20px;
  }

  .yyimg {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    background-color: #F5F7FA;
  }

  .yycard_p {
    font-size: 12px;
    line-height: 20px;
    vertical-align: middle;
    padding-left: 10px;
    color: #6b6b6b;
  }

  .yycard_title {
    font-size: 14px;
    color: #000;
  }

  /deep/ .yycard_btn .van-field__label {
    background: #0c1b35;
    color: #fff;
    width: auto;
    padding: 0 5px;
    border-radius: 4px;
  }

  .uploadImg {
    display: flex;
    padding: 16px;
    align-items: center;
    align-self: start;
    justify-content: space-around;

    span {
      flex: 1;
      font-size: 14px;
    }

    .right-soan {
      text-align: right;
    }
  }

  .van-uploader__wrapper {
    flex-wrap: nowrap;
  }

  /deep/ .van-field__control {
    text-align: right;
  }

  /deep/ .van-field__error-message {
    text-align: right;
  }

  .van-button--primary {
    background-color: #0c1b35;
    border-color: #0c1b35;
    border-radius: 4px;
    width: 90%;
    margin: 20px;
  }
</style>
